<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>探测类型管理</title>
	<meta name="decorator" content="default"/>
	<link rel='stylesheet' href="${ctxStatic}/colorPicker/spectrum.css" />
	<script src="${ctxStatic}/colorPicker/spectrum.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#value").focus();
			$("#inputForm").validate({
				submitHandler: function(form){
					loading('正在提交，请稍等...');
					form.submit();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
			
			/* if(${dict.remarks} != null && ${dict.remarks} !=""){
				
			} */
			
			$("#full").spectrum({
				　　allowEmpty:false,
				　　color: "rgba(0,0,0,0)",
				　　showInput: true,
				　　containerClassName: "full-spectrum",
				　　showInitial: true,
				　　showPalette: true,
				　　showSelectionPalette: true,
				　　showAlpha: true,
				　　maxPaletteSize: 7,
				　　preferredFormat: "hex",
				　　localStorageKey: "spectrum.demo",
				　　move: function (color) {
				　　　　updateBorders(color);
				　　},
					   beforeShow: function () {
						   
				　　},
				　　show: function () {

				　　},
				　　beforeShow: function () {

				　　},
				　　hide: function (color) {
				　　　　updateBorders(color);
				　　},

				　　palette: [
				　　　　["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", /*"rgb(153, 153, 153)","rgb(183, 183, 183)",*/
				　　　　"rgb(204, 204, 204)", "rgb(217, 217, 217)", /*"rgb(239, 239, 239)", "rgb(243, 243, 243)",*/ "rgb(255, 255, 255)"],
				　　　　["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
				　　　　"rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"],
				　　　　["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)",
				　　　　"rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)",
				　　　　"rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)",
				　　　　"rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)",
				　　　　"rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)",
				　　　　"rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)",
				　　　　"rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",
				　　　　"rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)",
				　　　　/*"rgb(133, 32, 12)", "rgb(153, 0, 0)", "rgb(180, 95, 6)", "rgb(191, 144, 0)", "rgb(56, 118, 29)",
				　　　　"rgb(19, 79, 92)", "rgb(17, 85, 204)", "rgb(11, 83, 148)", "rgb(53, 28, 117)", "rgb(116, 27, 71)",*/
				　　　　"rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)",
				　　　　"rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"]
				　　　　]
				　　});

				　　function updateBorders(color) {
				　　　　var hexColor = "transparent";
				　　　　if(color) {
				　　　　　　hexColor = color.toHexString();
				　　　　}
				　　　　$("#docs-content").css("border-color", hexColor);
							 var colorVal = $("#full").spectrum("get");
							 $("#colorVal").val(Math.round(colorVal._r)+":"+Math.round(colorVal._g)+":"+Math.round(colorVal._b)+":"+Math.round(colorVal._a*255));
				　　}
				
				if($("#colorVal").val() != ""){
					var val = $("#colorVal").val().split(":");
					$("#full").spectrum("set", "rgba("+val[0]+","+val[1]+","+val[2]+","+val[3]/255+")");  //设置选择器当前颜色
				}
		});
	</script>
</head>
<body>
	<ul class="nav nav-tabs">
		<li><a href="${ctx}/mine/type/">探测类型列表</a></li>
		<li class="active"><a href="${ctx}/mine/type/form?id=${dict.id}">探测类型<shiro:hasPermission name="mine:type:edit">${not empty dict.id?'修改':'添加'}</shiro:hasPermission><shiro:lacksPermission name="mine:type:edit">查看</shiro:lacksPermission></a></li>
	</ul><br/>
	<form:form id="inputForm" modelAttribute="dict" action="${ctx}/mine/type/save" method="post" class="form-horizontal" >
		<form:hidden path="id"/>
		<sys:message content="${message}"/>
		<div class="control-group">
			<label class="control-label">键值:</label>
			<div class="controls">
				<form:input path="value" htmlEscape="false" maxlength="50" class="required"/>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">标签:</label>
			<div class="controls">
				<form:input path="label" htmlEscape="false" maxlength="50" class="required"/>
			</div>
		</div>
		<div class="control-group" style="display:none;">
			<label class="control-label">类型:</label>
			<div class="controls">
				<form:input path="type" htmlEscape="false" value="probe_type" maxlength="50" class="required abc"/>
			</div>
		</div>
		<div class="control-group" style="display:none;">
			<label class="control-label">描述:</label>
			<div class="controls">
				<form:input path="description" htmlEscape="false" maxlength="50" class="required" value="探测类型"/>
			</div>
		</div>
		<div class="control-group " style="display:none;">
			<label class="control-label">排序:</label>
			<div class="controls">
				<form:input path="sort" htmlEscape="false" maxlength="11" class="required digits" value="10"/>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">颜色:</label>
			<div class="controls">
				<input id="full" />
				<form:textarea path="remarks" htmlEscape="false" rows="0" maxlength="100" id="colorVal" class="required input-xlarge" style="width:0;height:0;padding:0;"/>
			</div>
		</div>
		<div class="form-actions">
			<shiro:hasPermission name="sys:dict:edit"><input id="btnSubmit" class="btn btn-primary" type="submit" value="保 存" />&nbsp;</shiro:hasPermission>
			<input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
		</div>
	</form:form>
</body>
</html>